You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
3.5 KiB
98 lines
3.5 KiB
import Link from "next/link";
|
|
import { getDictionary, type Locale } from "@/lib/site-content";
|
|
|
|
export default async function HomePage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ locale: string }>;
|
|
}) {
|
|
const { locale } = await params;
|
|
const dictionary = getDictionary(locale as Locale);
|
|
|
|
return (
|
|
<div className="page-stack">
|
|
<section className="hero-panel">
|
|
<div className="hero-copy">
|
|
<div className="eyebrow">{dictionary.home.tag}</div>
|
|
<h1>{dictionary.home.title}</h1>
|
|
<p className="hero-description">{dictionary.home.subtitle}</p>
|
|
<div className="hero-actions">
|
|
<Link className="button button-dark" href={`/${locale}/login`}>
|
|
{dictionary.home.primaryCta}
|
|
</Link>
|
|
<Link className="button button-light" href={`/${locale}/docs`}>
|
|
{dictionary.home.secondaryCta}
|
|
</Link>
|
|
</div>
|
|
<div className="hero-proof">
|
|
<span>{dictionary.home.freeTrial}</span>
|
|
<span>{dictionary.home.socialProof}</span>
|
|
</div>
|
|
</div>
|
|
<div className="hero-stage">
|
|
<div className="stage-card stage-card-primary">
|
|
<div className="stage-label">{dictionary.home.stageLabel}</div>
|
|
<div className="stage-stat">{dictionary.home.stageValue}</div>
|
|
<p>{dictionary.home.stageDescription}</p>
|
|
</div>
|
|
<div className="stage-card">
|
|
<div className="stage-mini-grid">
|
|
{dictionary.home.heroPhrases.map((phrase) => (
|
|
<span key={phrase}>{phrase}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="section-panel">
|
|
<div className="section-heading">
|
|
<div className="eyebrow">{dictionary.home.scenesTag}</div>
|
|
<h2>{dictionary.home.scenesTitle}</h2>
|
|
<p>{dictionary.home.scenesSubtitle}</p>
|
|
</div>
|
|
<div className="card-grid card-grid-three">
|
|
{dictionary.home.scenes.map((scene) => (
|
|
<article className="feature-card" key={scene.name}>
|
|
<span className="card-kicker">{scene.category}</span>
|
|
<h3>{scene.name}</h3>
|
|
<p>{scene.description}</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="section-panel section-panel-accent">
|
|
<div className="section-heading">
|
|
<div className="eyebrow">{dictionary.home.flowTag}</div>
|
|
<h2>{dictionary.home.flowTitle}</h2>
|
|
<p>{dictionary.home.flowSubtitle}</p>
|
|
</div>
|
|
<div className="steps-grid">
|
|
{dictionary.home.flowSteps.map((step, index) => (
|
|
<article className="step-card" key={step.title}>
|
|
<div className="step-number">0{index + 1}</div>
|
|
<h3>{step.title}</h3>
|
|
<p>{step.description}</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="section-panel">
|
|
<div className="section-heading">
|
|
<div className="eyebrow">{dictionary.home.trustTag}</div>
|
|
<h2>{dictionary.home.trustTitle}</h2>
|
|
</div>
|
|
<div className="stats-grid">
|
|
{dictionary.home.trustStats.map((stat) => (
|
|
<article className="stat-card" key={stat.label}>
|
|
<strong>{stat.value}</strong>
|
|
<span>{stat.label}</span>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|